<template>
	<view class="my-container">
		<!-- 用户信息栏 -->
		<view class="user-info" @click="navigateToLogin">
			<image class="avatar" :src="userInfo.avatar || '/static/img/avatar.png'" mode="aspectFill"></image>
			<view class="user-detail">
				<text class="username">{{ userInfo.nickname || userInfo.username || '未登录用户' }}</text>
				<text class="welcome">{{ userInfo.username ? '欢迎回来!' : '点击登录享受更多服务' }}</text>
			</view>
			<text class="arrow">›</text>
		</view>

		<!-- 注销按钮（已登录时显示） -->
		<view class="logout-section" v-if="userInfo.username">
			<button class="logout-btn" @click="handleLogout">退出登录</button>
		</view>

		<!-- 功能菜单 -->
		<view class="menu-list">
			<view class="menu-item" @click="navigateToOrderList">
				<text class="icon">📃</text>
				<text class="label">历史订单</text>
				<text class="arrow">›</text>
			</view>
			<view class="menu-item">
				<text class="icon">⭐</text>
				<text class="label">我的收藏</text>
				<text class="arrow">›</text>
			</view>
			<view class="menu-item">
				<text class="icon">📍</text>
				<text class="label">个人信息</text>
				<text class="arrow">›</text>
			</view>
		</view>

		<!-- 服务区域 -->
		<view class="service-section">
			<view class="section-title">我的服务</view>
			<view class="service-grid">
				<view class="service-item">
					<text class="service-icon">❓</text>
					<text class="service-label">帮助中心</text>
				</view>
				<view class="service-item">
					<text class="service-icon">📞</text>
					<text class="service-label">联系客服</text>
				</view>
				<view class="service-item">
					<text class="service-icon">⚙️</text>
					<text class="service-label">设置</text>
				</view>
				<view class="service-item">
					<text class="service-icon">📋</text>
					<text class="service-label">关于我们</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo: {} // 初始化用户信息为空对象
			}
		},
		onShow() {
			// 页面显示时获取用户信息
			this.getUserInfo();
		},
		methods: {
			navigateToLogin() {
				// 只有未登录时才跳转到登录页面
				if (!this.userInfo.username) {
					uni.navigateTo({
						url: '/pages/login/login'
					});
				}
			},
			navigateToOrderList(){
				// 只有登录时才跳转到订单列表页面
				if (this.userInfo.username) {
					uni.navigateTo({
						url: '/pages/orderList/orderList'
					});
				} else {
					uni.showToast({
						title: '您还未进行登录',
						icon: 'none'
					});
				}
			}, // 这里应该是逗号，而不是右花括号
			getUserInfo() {
				// 从本地存储获取用户信息
				const userInfo = uni.getStorageSync('userInfo');
				console.log('从存储获取的用户信息:', userInfo); // 添加这行调试信息

				if (userInfo) {
					this.userInfo = userInfo;
					console.log('已设置用户信息:', this.userInfo); // 添加这行调试信息
				} else {
					this.userInfo = {};
					console.log('未找到用户信息'); // 添加这行调试信息
				}
			},
			handleLogout() {
				uni.showModal({
					title: '确认注销',
					content: '确定要注销当前账号吗？',
					success: (res) => {
						if (res.confirm) {
							// 清除本地存储的用户信息和token
							uni.removeStorageSync('userInfo');
							uni.removeStorageSync('token');

							// 更新全局状态
							if (this.$store) {
								this.$store.commit('setUserInfo', {});
								this.$store.commit('setToken', '');
							}

							// 重置本地用户信息
							this.userInfo = {};

							uni.showToast({
								title: '已注销',
								icon: 'success'
							});
						}
					}
				});
			}
		}
	}
</script>

<style>
	.my-container {
		padding: 20rpx;
		background-color: #f8f8f8;
		min-height: 100vh;
	}

	.user-info {
		display: flex;
		align-items: center;
		padding: 40rpx 30rpx;
		background-color: #fff;
		border-radius: 16rpx;
		margin-bottom: 20rpx;
	}

	.avatar {
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
		margin-right: 30rpx;
	}

	.user-detail {
		flex: 1;
		display: flex;
		flex-direction: column;
	}

	.username {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 8rpx;
	}

	.welcome {
		font-size: 24rpx;
		color: #999;
	}

	.arrow {
		font-size: 48rpx;
		color: #999;
	}

	.logout-section {
		padding: 0 30rpx;
		margin-bottom: 20rpx;
	}

	.logout-btn {
		width: 100%;
		height: 80rpx;
		background-color: #ff3b30;
		color: #fff;
		border-radius: 12rpx;
		font-size: 32rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border: none;
	}

	.logout-btn:active {
		background-color: #d32f2f;
	}

	.menu-list {
		background-color: #fff;
		border-radius: 16rpx;
		margin-bottom: 20rpx;
		overflow: hidden;
	}

	.menu-item {
		display: flex;
		align-items: center;
		padding: 30rpx;
		border-bottom: 1rpx solid #f0f0f0;
	}

	.menu-item:last-child {
		border-bottom: none;
	}

	.menu-item .icon {
		font-size: 40rpx;
		margin-right: 20rpx;
	}

	.menu-item .label {
		flex: 1;
		font-size: 30rpx;
		color: #333;
	}

	.service-section {
		background-color: #fff;
		border-radius: 16rpx;
		padding: 30rpx;
	}

	.section-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 30rpx;
	}

	.service-grid {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 30rpx;
	}

	.service-item {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.service-icon {
		font-size: 60rpx;
		margin-bottom: 16rpx;
	}

	.service-label {
		font-size: 24rpx;
		color: #666;
	}
</style>